<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i>  俱乐部管理列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!-- <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAll">批量禁用</el-button> -->
                <el-select v-model="select_status" placeholder="筛选状态" @change="getData" class="handle-select mr10">
                    <el-option key="1" label="启用" value="0"></el-option>
                    <el-option key="2" label="禁用" value="1"></el-option>
                    <el-option key="3" label="全部" value="-1"></el-option>
                </el-select>
                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="primary" icon="el-icon-lx-add" @click="addVisible = true">添加俱乐部</el-button>
            </div>
            <el-table :data="data" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column type="index" width="80" align="center" sortable label="序列"></el-table-column>
                <el-table-column prop="clubname" label="俱乐部名称" width="200">
                </el-table-column>
                <el-table-column label="logo" width="100">
                    <template slot-scope="scope">
                        <el-image style="width: 80px; height: 80px" fit="cover"
                        :src="`http://localhost/fitness/public/static/img/`+scope.row.clublogo"
                        @click="handlePictureCardPreview(scope.row.clublogo)">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="clubintro" label="俱乐部简介" width="auto">
                </el-table-column>
                <el-table-column prop="adminname" label="管理员" width="90">
                </el-table-column>
                <el-table-column prop="clubmail" label="俱乐部邮箱" width="200">
                </el-table-column>
                <el-table-column prop="clubdate" label="入驻日期" sortable width="120">
                </el-table-column>
                <el-table-column prop="clubid" label="俱乐部详情" width="210" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-s-custom" @click="handleCoach(scope.row)">教练</el-button>
                        <el-button type="text" icon="el-icon-tickets" @click="handleCourse(scope.row)">课程</el-button>
                        <el-button type="text" icon="el-icon-video-play" @click="handleVideo(scope.row)">视频</el-button>
                    </template>
                    
                </el-table-column>
                <el-table-column prop="status" label="俱乐部状态" width="100" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.status===0">
                            <i class="el-icon-circle-check" style="color:#1e90ff"> 已启用</i>
                        </template>
                        <template v-else>
                            <i class="el-icon-circle-close" style="color:red"> 已禁用</i>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.status===0">
                            <el-button type="text" icon="el-icon-delete" class="red" 
                                @click="handleBan(scope.row)">禁用</el-button>
                        </template>
                        <template v-else>
                            <el-button type="text" icon="el-icon-circle-check" 
                                @click="handleOnClub(scope.row)">启用</el-button>
                        </template>

                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 添加俱乐部弹出框 -->
        <el-dialog title="请填写俱乐部信息" :visible.sync="addVisible" width="30%">
            <el-form ref="form" :model="addform" :rules="rules" label-width="60px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="addform.name"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="intro">
                    <el-input type="textarea" v-model="addform.intro"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addform.email"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 禁用提示框 -->
        <el-dialog title="提示" :visible.sync="banVisible" width="300px" center>
            <div class="del-dialog-cnt">确定禁用该俱乐部？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="banVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmBan">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 启用提示框 -->
        <el-dialog title="提示" :visible.sync="onVisible" width="300px" center>
            <div class="del-dialog-cnt">确定启用该俱乐部？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="onVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmOn">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 教练弹出框 -->
        <el-dialog title="教练详情" :visible.sync="dialogCoachVisible">
            <el-table :data="coachData">
                <el-table-column label="教练头像" width="100">
                    <template slot-scope="scope">
                        <el-image style="width: 60px; height: 60px" fit="cover"
                        :src="`http://localhost/fitness/public/static/img/`+scope.row.avatar"
                        @click="handlePictureCardPreview(scope.row.avatar)">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column property="coachname" label="教练名" width="100"></el-table-column>
                <el-table-column property="clubname" label="所在俱乐部" width="180"></el-table-column>
                <el-table-column property="ctel" label="教练电话" width="150"></el-table-column>
                <el-table-column property="cemail" label="教练邮箱"></el-table-column>
                <el-table-column label="教练状态" width="150" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.masterstatus==1">
                            <i class="el-icon-circle-check" style="color:#1e90ff"> 普通教练</i>
                        </template>
                        <template v-if="scope.row.masterstatus==2">
                            <el-tooltip class="item" effect="dark" content="2019-08-15" placement="top">
                                <i class="el-icon-circle-check" style="color:#9b59b6"> 大师</i>
                            </el-tooltip>
                        </template>
                        <template v-if="scope.row.masterstatus==0">
                            <i class="el-icon-circle-close" style="color:red"> 不可用</i>
                        </template>
                        <template v-if="scope.row.masterstatus==3">
                            <i class="el-icon-magic-stick" style="color:#2ecc71"> 申请大师中</i>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.masterstatus==0">
                            <el-button type="text" class="color:#1e90ff" @click="onCoach(scope.row)">启用</el-button>
                        </template>
                        <template v-else>
                            <el-button type="text" class="red" @click="offCoach(scope.row)">禁用</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 课程弹出框 -->
        <el-dialog title="课程详情" :visible.sync="courseVisible">
            <el-table :data="courseData">
                <el-table-column label="课程海报" width="100">
                    <template slot-scope="scope">
                        <el-image style="width: 60px; height: 60px" fit="cover"
                        :src="`http://localhost/fitness/public/static/img/`+scope.row.cpic"
                        @click="handlePictureCardPreview(scope.row.cpic)">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column property="cname" label="课程名" width="180"></el-table-column>
                <el-table-column property="cintro" label="课程简介" width="auto"></el-table-column>
                <el-table-column property="price" label="课程价格￥" width="80"></el-table-column>
                <el-table-column property="coachname" label="授课教练" width="90"></el-table-column>
                <el-table-column label="课程状态" width="80" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.cstatus==0">
                            <i class="el-icon-circle-check" style="color:#1e90ff"> 可用</i>
                        </template>
                        <template v-if="scope.row.cstatus==1">
                            <i class="el-icon-circle-close" style="color:red"> 不可用</i>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.cstatus==1">
                            <el-button type="text" class="color:#1e90ff" @click="onCourse(scope.row)">启用</el-button>
                        </template>
                        <template v-else>
                            <el-button type="text" class="red" @click="offCourse(scope.row)">禁用</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 视频弹出框 -->
        <el-dialog title="视频详情" :visible.sync="videoVisible" width="35%">
            <div v-for="item in videoData" :key="item.id">
                <div class="show-video">
                    <h2>{{item.vname}}
                        <template v-if="item.vstatus==0">
                            <i class="el-icon-circle-check" style="color:#1e90ff"> 已通过</i>
                            <el-button style="float:right;" type="danger" @click="offVideo(item)">禁用</el-button>
                        </template>
                        <template v-if="item.vstatus==1">
                            <i class="el-icon-circle-close" style="color:red"> 已禁用</i>
                            <el-button style="float:right;" type="primary" @click="onVideo(item)">启用</el-button>
                        </template>
                    </h2><br>
                    <p>{{item.intro}}</p><br>
                    <div class="video-panel">
                        <video width="100%" height="100%" controls :src="`http://localhost/fitness/public/static/video/`+item.address"></video>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 预览图片弹出框 -->
        <el-dialog :visible.sync="dialogImgVisible" width="25%">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
import { Promise } from 'q';
    export default {
        name: 'basetable',
        data() {
            return {
                multipleSelection: [],
                select_status: '0',
                select_word: '',
                dialogImageUrl: '',
                is_search: false,
                addVisible: false,
                banVisible: false,
                onVisible: false,
                courseVisible: false,
                dialogCoachVisible: false,
                dialogImgVisible: false,
                videoVisible: false,
                clubData: [],
                addform: {
                    name: '',
                    intro: '',
                    email: ''
                },
                banClubid: 0,
                onClubid: 0,
                coachData: [],
                courseData: [],
                videoData: [],
                rules:{ 
                    name:[            
                        { required: true, message: '请输入俱乐部名字', trigger: 'blur' }
                    ],
                    intro:[
                        { required: true, message: '请输入教练名字', trigger: 'blur' },
                        { min: 1, max: 240, message: '长度在 1 到 240 个字符', trigger: 'blur' }
                    ],
                    email:[
                        { required: true, type: 'email', message: '请输入管理员邮箱', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            this.getData();
        },
        computed: {
            data(){
                return this.clubData.filter( (d) => {
                    if(d.clubname.indexOf(this.select_word) > -1){
                        return d;
                    }
                })
            }
        },
        methods: {
            getData(status){
                this.$axios.get('/api/Test/club',{
                    params: {
                        status: this.select_status
                    }
                }).then(response=>{
                    this.clubData = response.data;
                })
            },
            search() {
                this.is_search = true;
                this.getData();
                setTimeout(() => {
                    this.clubData = this.clubData.filter((d) => {
                        if(d.clubname.indexOf(this.select_word) > -1){
                            return d;
                        }
                    })
                }, 500);
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            saveAdd() {
                this.addVisible = false;
                this.$axios.post('/api/Test/addclub',this.addform).then(res => {
                    console.log('res :', res.data);
                    if(res.data.flag==1){
                        this.$message.success(`添加俱乐部成功`);
                        this.getData();
                    }else{
                        this.$message.error(`添加俱乐部失败`);
                    }
                })
            },
            confirmBan(){
                this.$axios.get('/api/Test/banclub',{
                    params: {
                        'clubid': this.banClubid
                    }
                }).then(res => {
                    console.log('res :', res.data);
                    if(res.data.flag==1){
                        this.$message.success('禁用成功');
                        this.getData();
                    }
                })
                this.banVisible = false;
            },
            confirmOn(){
                this.$axios.get('/api/Test/onclub',{
                    params: {
                        'clubid': this.onClubid
                    }
                }).then(res => {
                    console.log('res :', res.data);
                    if(res.data.flag==1){
                        this.$message.success('启用成功');
                        this.getData();
                    }
                })
                this.onVisible = false;
            },
            handleBan(row){
                this.banVisible = true;
                this.banClubid = row.clubid;
            },
            handleOnClub(row){
                this.onVisible = true;
                this.onClubid = row.clubid;
            },
            getCoach(clubid){
                this.$axios('/api/Test/clubCoach',{
                    params: {
                        clubid: clubid
                    }
                }).then(res => {
                    this.coachData = res.data
                });
            },
            handleCoach(row){
                this.getCoach(row.clubid)
                this.dialogCoachVisible = true;
            },
            handlePictureCardPreview(url) {
                this.dialogImageUrl =`http://localhost/fitness/public/static/img/`+url;
                console.log('object :', this.dialogImageUrl);
                this.dialogImgVisible = true;
            },
            getCourse(clubid){
                this.$axios.get('/api/Test/clubCourseList',{
                    params: {
                        clubid: clubid
                    }
                }).then(res => {
                    this.courseData = res.data;

                })
            },
            handleCourse(row){
                this.getCourse(row.clubid);
                this.courseVisible = true;
            },
            onCoach(row){
                this.$axios.get('/api/Test/onCoach',{
                    params: {
                        coachid: row.coachid
                    }
                }).then(res => {
                    this.getCoach(row.clubid);
                })
            },
            offCoach(row){
                this.$axios.get('/api/Test/offCoach',{
                    params: {
                        coachid: row.coachid
                    }
                }).then(res => {
                    this.getCoach(row.clubid);
                })
            },
            onCourse(row){
                this.$axios.get('/api/Test/onCourse',{
                    params: {
                        cid: row.cid
                    }
                }).then(res => {
                    this.getCourse(res.data.clubid);
                })
            },
            offCourse(row){
                this.$axios.get('/api/Test/offCourse',{
                    params: {
                        cid: row.cid
                    }
                }).then(res => {
                    this.getCourse(res.data.clubid);
                })
            },
            getVideo(clubid){
                this.$axios.get('/api/Test/clubVideo',{
                    params: {
                        clubid: clubid
                    }
                }).then(res => {
                    this.videoData = res.data;
                })
            },
            handleVideo(row){
                this.getVideo(row.clubid);
                this.videoVisible = true;
            },
            onVideo(vitem){
                this.$axios.get('/api/Test/onVideo',{params: {vid: vitem.vid}}).then(res => {
                    if(res.data.flag==1){
                        this.getVideo(vitem.clubid)
                    }
                })
            },
            offVideo(vitem){
                this.$axios.get('/api/Test/offVideo',{params: {vid: vitem.vid}}).then(res => {
                    if(res.data.flag==1){
                        this.getVideo(vitem.clubid)
                    }
                })     
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
    .show-video{
        height: 100%;
        width: 100%;
        margin-bottom: 20px;
    }
    .video-panel{
        height: 300px;
        width: 100%;
        overflow: hidden;
        outline: none;
        border: none;
    }
</style>
